<template>
  <view class="container">
    <view class="recruit">
      <view class="rTop">
        <view class="warehouseName">
          {{ dataForm.warehouseName }}
        </view>
        <view class="orderNumber">
          {{ dataForm.orderNumber }}
        </view>
      </view>
    </view>
    <view class="itemList" v-for="(item,index) in arrivalDetailFormList">
      <view class="productName">
        {{ item.productName }}
        <view class="buttonList">
          <view class="goScanCode">扫码</view>
        </view>
      </view>
      <view class="productInfo">
        {{ item.productSpecification }} | {{ item.productUniqueCode }}
      </view>
      <br/>
      <view class="productNumber">
        到货数量：{{ item.arrivalNumber }}
      </view>
      <br/>
      <view class="productPrice">
        扫码数量：{{ item.alreadyScannedNumber }}
      </view>
    </view>
  </view>
</template>

<script>
import {getArrivalOrderForm} from "@/apis/ArrivalOrder";

export default {
  data() {
    return {
      dataForm: {},
      dataCode: null,
      arrivalDetailFormList: []
    }
  },

  onLoad(option) {
    this.dataCode = option.arrivalCode
  },

  methods: {
    goScanCode() {

    }
  },
  async mounted() {
    this.dataForm = (await getArrivalOrderForm(this.dataCode)).data
    if (this.dataForm != null) {
      this.arrivalDetailFormList = this.dataForm.arrivalOrderDetailFormList
    }
  }
}
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
.dflex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dflexsb() {
  .dflex();
  justify-content: space-between;
}

.dflexsa() {
  .dflex();
  justify-content: space-around;
}

.container {
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  overflow-y: scroll !important;
  background: #f6f6f6;
  color: #333;
  padding-bottom: 50rpx;
  box-sizing: border-box;

  .recruit {
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 50rpx;

    .rTop {
      .dflexsb();
      margin: 0rpx 0rpx 30rpx 0rpx;

      .warehouseName {
        width: 70%;
        font-size: 32rpx;
        font-weight: bolder;
      }

      .orderNumber {
        font-size: 28rpx;
        flex: 1;
        color: red;
        .dflex();
      }
    }
  }

  .itemList {
    padding: 30rpx;
    box-sizing: border-box;
    background: #01BEFF;
    border-radius: 50rpx;
    margin-top: 10rpx;

    .productName {
      .dflexsb();
      width: 100%;
      font-size: 32rpx;
      font-weight: bolder;
      .buttonList {
        width: 30%;
        display: flex;
        justify-content: space-around;
        .goScanCode {
          font-size: 28rpx;
        }
      }
    }

    .productInfo {
      color: #6a6a6a;
      border-top: 1px solid #6a6a6a;
    }
  }

}
</style>